<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .box {
            width: 100%;
            height: 500px;
            background-color: orange;
        }
    </style>
    <script>
        // console.log(document.querySelector('.box')); //null 代码执行到这里，不知道.box是什么。
        // window.onload = function() {
        //     console.log(document.querySelector('.box')); //此时是可以获取元素对象的，因为里面的代码最后执行。
        // }
    </script>
</head>

<body style="height: 10000px; width: 2000px;">
    <div class="box">500px</div>
    <!-- <script>
        console.log(document.querySelector('.box')); //ok 获取元素
    </script> -->
</body>

</html>
<script>
    //一.Window相关的事件和操作
    //1.window的相关事件 - 注意此处的事件不能省略window
    //1.1.onload事件：页面内容加载完成后触发此事件(DOM结构，图片等内容.....)
    // onload事件解决代码顺序问题，onload后面的代码等待结构或者网页内容加载完成之后再执行。
    // 事件不能重复应用，页面不能出现两个相同的事件，否则后面的会覆盖前面的。
    // 可以通过onload事件，将js代码写在任意位置，总是会最后执行。
    // window.onload = function() {
    //     console.log('hehe');
    // }

    //1.2.onscroll事件：拖动浏览器的滚动条触发此事件,而且此事件的触发频率很高。
    // var num = 0;
    // window.onscroll = function() {
    //     num++;
    //     console.log(num);
    // }

    //1.3.onresize事件：浏览器窗口缩放所触发的事件,触发频率很高
    //这里的缩放指的是浏览器中可视的窗口(看的见的区域)
    // var num = 0;
    // window.onresize = function() {
    //     num++;
    //     console.log(num);
    // }

    //2.读写可视区的宽高:浏览器内部看得见的区域。
    // 获取浏览器看得见的区域的尺寸。
    // document.documentElement:表示html元素。通过此方式获取html元素对象。
    // alert(document.documentElement); //[object HTMLHtmlElement]
    // alert(document.querySelector('html')); //[object HTMLHtmlElement]
    // 获取可视区的宽度：html元素对象的宽度
    // document.documentElement.clientWidth:获取可视区的宽度
    // document.documentElement.clientHeight:获取可视区的高度
    // window.onresize = function() {
    //     console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
    // }


    //3.读写滚动条距离
    //滚动条的距离是比例形成的值，并不是测量距离。
    //document.documentElement.scrollTop:获取滚动条离顶部的距离。
    //document.documentElement.scrollLeft:获取滚动条离左边的距离。

    // window.onscroll = function() {
    //     console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
    // }

    // 点击document，滚动条的top值设置为0
    // document.onclick = function() {
    //     document.documentElement.scrollTop = 0;
    //     document.documentElement.scrollLeft = 0;
    // }

    // scrollTo() 方法可把内容滚动到指定的坐标。
    // scrollTo(x坐标, y坐标)
    // xpos: 必需。 要在窗口文档显示区左上角显示的文档的 x 坐标。
    // ypos: 必需。 要在窗口文档显示区左上角显示的文档的 y 坐标。

    // document.onclick = function() {
    //     window.scrollTo(0, 0);
    // }

    // 4.获取常见的元素对象。
    // document:文档对象，表示获取document整个文档。
    // alert(document);//[object HTMLDocument]

    // document.documentElement:获取html元素。
    // document.body : 获取body元素
    // document.title: 获取title元素
    // document.head:  获取head元素
    // 其他的div,span,strong,p...通过querySelector进行获取。


    //获取对应元素的尺寸。
    // console.log(document.documentElement.clientWidth); //891  可视区
    // console.log(document.body.clientWidth); //2000  自己设置body的width
</script>